<template>
    <div class="navbar-grid">
      <!-- 左侧一级导航栏 -->
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item v-for="(item, index) in mainNavItems" :key="index" :index="item.path">
          <router-link :to="item.path" style="text-decoration: none; color: inherit;">
            <i :class="item.icon"></i>
            <span>{{ item.title }}</span>
          </router-link>
        </el-menu-item>
      </el-menu>
  
      <!-- 上部面包屑导航栏 -->
      <div class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="(crumb, index) in breadcrumbs" :key="index">
            <router-link v-if="crumb.path" :to="crumb.path" style="text-decoration: none; color: inherit;">
              {{ crumb.title }}
            </router-link>
            <span v-else>{{ crumb.title }}</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Navbar',
    computed: {
      mainNavItems() {
        // 这里可以根据实际需求定义一级导航栏的数据
        return [
          { title: '首页', path: '/', icon: 'el-icon-s-home' },
          { title: '关于', path: '/about', icon: 'el-icon-info' },
          { title: '服务', path: '/services', icon: 'el-icon-service' },
          { title: '联系我们', path: '/contact', icon: 'el-icon-phone' }
        ];
      },
      breadcrumbs() {
        // 根据当前路由生成面包屑导航
        const matched = this.$route.matched;
        return matched.map(route => ({
          title: route.meta.title || route.name,
          path: route.path
        }));
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  };
  </script>
  
  <style scoped>
  .navbar-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto 1fr;
    height: 100vh;
  }
  
  .el-menu-vertical-demo {
    height: 100%;
    position: sticky;
    top: 0;
  }
  
  .breadcrumb {
    grid-column: 2 / -1;
    padding: 10px;
    background-color: #f0f2f5;
  }
  </style>